<template>
    <Center>
        <div class="p-8" style="height: 100%;">
            <div>飙升榜</div>
            <el-table class="mt-4" :data="tableData" stripe style="width: 100%" @row-click="onClick">
                <el-table-column prop="index" label="序号"  />
                <el-table-column prop="title" label="歌名" />
                <el-table-column prop="bpm" label="BPM" />
                <el-table-column prop="duration" label="时长" />
                <el-table-column prop="auther" label="发布者" />
                <el-table-column prop="price" label="售价" />
                <el-table-column prop="caozuo" label="操作" width="180" />
            </el-table>
            <!-- <div class="mt-4 flex justify-center">
                <el-pagination layout="prev, pager, next" :total="50" />
            </div> -->
        </div>
    </Center>
</template>
<script setup>
import { ref ,onMounted , computed} from 'vue';
import test from "@/assets/imgs/1.webp";
import Center from '../../components/common/Center.vue'
import { PersistentStore } from "@/stores";
import { add , list} from '@/components/common/music';
import {  musicInfo} from "@/http/api";
const persistentStore = PersistentStore();
const tableData = ref([]);
const baseUrl = import.meta.env.VITE_API_URL;
onMounted(() => {   
    let music_list = computed(() => persistentStore.songListInfo.list);
    list.value = [];
    music_list.value.forEach((item, index) => {
        //console.log(item)
        tableData.value.push({
            index:index+1,
            id:item.id,
            title:item.title,
            bpm:item.user.name,
            duration:item.duration,
            auther:item.user.name,
            price:"￥"+item.price,
            caozuo:''
        });

        list.value.push({
            name:item.title,
            author:item.user?.name,
            url:baseUrl +item.audio,
            image:baseUrl +item.image,
        })
    });
});

const onClick = async (row)=>{
    getMusicInfo(row)
}
const getMusicInfo = async (e) => {
    const { data } = await musicInfo({
        id:e.id
    });
    // console.log(data.music.audio);
    // url.value = baseUrl + data.music.audio;
    // name.value = data.music.user.introduce;
    // author.value = data.music.user.name;
    // image.value = baseUrl + data.music.image;  
    const music_list = {name:data.music.title,author:data.music.user?.name,url:baseUrl +data.music.audio,image:baseUrl + data.music.image};
    console.log("123",music_list);
    add(music_list)
}
</script>